<template>
  <view>
    <uv-vtabs
      :chain="chain"
      :list="list"
      :barItemBadgeStyle="{ right: '20px', top: '12px' }"
      @change="change">
      <view style="padding: 10px;">
        <view class="cu-card case no-card">
          <view
            @click="toProject(item.id)"
            class="cu-item shadow"
            v-for="(item, index) in projects"
            :key="index">
            <view class="image">
              <image :src="item.cover" mode="widthFix"></image>
              <view class="cu-tag bg-gradual-orange">{{ item.category }}</view>
              <view class="cu-bar bg-shadeBottom">
                <text class="text-cut">{{ item.summary }}</text>
              </view>
            </view>
          </view>
        </view>
       
      </view>
    </uv-vtabs>
  </view>
</template>

<script setup>
import { ref } from "vue";
import useApp from "@/hooks";
const { $ } = useApp();
const chain = ref(false);
const projects = ref([]);
const list = ref([]);
function change(e) {
  console.log(e);
  let cate = list.value[e]?.name;
  reqProjects(cate);
}
// 查询分类
function reqCate() {
  uni.showLoading({
    title: "加载中",
  });
  $.request({
    url: "/cms/categories",
    method: "get",
    params: { pageSize: 100, pageNum: 1, status: 1 },
  }).then((res) => {
    console.log(res);
    uni.hideLoading();
    list.value = res.data.content;
    reqProjects(list.value[0]?.name);
  });
}
/**
 * 查看详情
 */
function toProject(pid){
	uni.navigateTo({
		url:'../index/project?id=' + pid
	})
}
// 查询项目
function reqProjects(cate) {
  uni.showLoading({
    title: "获取项目列表",
  });
  $.request({
    url: "/pms/articles",
    method: "get",
    params: { pageSize: 100, pageNum: 1, category: cate },
  }).then((res) => {
    console.log(res);
    let arr = res.data.content;
    arr = $.buildArrayEleReplace(arr, "cover", "/dev-api", $.api);
    console.log(arr);
    projects.value = arr;
    uni.hideLoading();
  });
}
reqCate();
</script>

<style>

@import '@/uni_modules/color-ui/lib/main.css';
</style>